@import '../../../styles/theme/index.less';

@mi-dropdown: ~'@{mi-prefix}dropdown';
@ant-dropdown: ant-dropdown;

.@{mi-dropdown} {
    &-name {
        color: var(--mi-dropdown-name, @mi-dropdown-name);
        .properties(margin-left);
    }

    &-menu {
        z-index: @mi-z-index-top;

        .@{ant-dropdown} {
            &-menu {
                background: var(--mi-dark, @mi-dark);
                .border-radius();

                &-item {
                    color: var(--mi-font, @mi-font);
                    .flex(center, flex-start);
                    .properties(padding-top);
                    .properties(padding-bottom);
                    .properties(padding-left, 24);
                    .properties(padding-right, 24);
                    transition: none;

                    &-selected {
                        background: transparent;
                    }

                    a {
                        .flex(center, flex-start);
                        color: var(--mi-font, @mi-font);
                        padding: 0;
                        margin: 0;

                        .anticon {
                            &:last-child {
                                margin-right: 0;
                                .properties(margin-left, 24);
                            }
                            
                            &:first-child {
                                margin-left: 0;
                            }
                        }

                        .@{mi-dropdown}-title {
                            .properties(margin-left);
                        }

                        .@{mi-dropdown}-tag {
                            .tag();
                        }

                        .@{mi-dropdown}-tag,
                        .@{mi-dropdown}-icon {
                            .properties(margin-left, 24);
                        }

                        .@{mi-dropdown}-icon {
                            color: var(--mi-error, @mi-error);
                        }
                    }

                    &-active,
                    &:hover {
                        .linear-gradient-background();
                        color: var(--mi-theme, @mi-theme);

                        a,
                        .anticon,
                        .anticon + span {
                            color: var(--mi-theme, @mi-theme);
                        }
                    }
                }
            }
        }
    }

    &-avatar {
        .properties(width, 28);
        .properties(height, 28);
        border: 1px solid var(--mi-theme, @mi-theme);

        > img {
            .border-radius-circle();
            transform: scale(1.1);
        }
    }
}